<template>
  <div class="app-container">
    <div class="container-fluid">
      <div class="filter-container addList">
        <div style="padding-bottom: 20px" class="at">
        <h3><span>{{ $route.meta.title }} </span>
                 </h3>
                 <h4 v-if='$route.query.months'>

                 <template v-if='typeof($route.query.months) ==="object"'>
                    {{new Date($route.query.months[0]).getFullYear() + '/' + (Number(new Date($route.query.months[0]).getFullYear())+ 1)}}
                 <span style="color:#00468C" :key='i'  v-for="(lists, i) in $route.query.months">{{new Date(lists).toDateString().split(' ')[1]}}</span>
                 </template>
                   <template v-else>
                  {{new Date($route.query.months).getFullYear() + '/' + (Number(new Date($route.query.months).getFullYear())+ 1)}}
                <span style="color:#00468C"   >{{new Date($route.query.months).toDateString().split(' ')[1]}}</span>
                 </template>
                 </h4>
               </div>
               <el-form ref="info" :model="info" :rules="rules" class="event-from">
                 <el-form-item label="" prop="sport">
                   <el-select clearable v-model="info.sport" placeholder="Sport " style="width: 150px">
                     <el-option v-if='item' v-for="(item,i) in list.sportNames" :key="i" :label="item.typeName" :value="item" />
                   </el-select>
                 </el-form-item>
                <el-form-item label="" prop="title">
                  <el-select clearable v-model="info.title" placeholder="Title " style="width: 150px">
                    <el-option  v-if='item' v-for="(item,i) in list.titleNames" :key="i" :label="item" :value="item" />
                  </el-select>
                </el-form-item>

                <el-form-item lael="" prop="venue">
                  <el-select clearable v-model="info.venue" placeholder="Venue " style="width: 150px">
                    <el-option v-if='item' v-for="(item,i) in list.venuns" :key="i" :label="item" :value="item" />
                  </el-select>
                </el-form-item>

                 <!-- <el-button type="button" class="el-button el-button--success" :loading="buttonDisable" style="height: 40px;" @click="onSubmit('info')"><span>Add</span></el-button> -->
                 <el-button type="button" class="el-button el-button--success" :loading="buttonDisable" style="height: 40px;"
                   @click="fetchData(1)"><span>Search</span></el-button>
               </el-form>
             </div>

      <el-table v-loading="listLoading" :data="list.list" element-loading-text="Loading" border fit
        highlight-current-row stripe>
        <el-table-column prop="sportName" label="Sport">
          <template slot-scope="scope">
            <span >{{ scope.row.sportName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="title" label="Title">
          <template slot-scope="scope">

            <el-select clearable v-show="scope.row.edit" v-model="scope.row.types" placeholder="Sport Select" style="min-width: 120px">
              <el-option v-for="item in EVENT_TYPE" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
            <span v-show="!scope.row.edit">{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="venue" label="Venue">
          <template slot-scope="scope">
            <span :style='scope.row.venue==="Grand-total"?"font-weight: 650;":""' >{{ scope.row.venue }}</span>
          </template>
        </el-table-column>
        <!-- 总费用 -->
         <el-table-column prop="allTotalSession" label="Total Sessions">
           <template slot-scope="scope">
             <span :style='scope.row.venue==="Grand-total"?"font-weight: 650;":""'>{{ scope.row.allTotalSession }}</span>
           </template>
         </el-table-column>

        <el-table-column prop="allActualHourSession" label="Actual Hour per session">
          <template slot-scope="scope">
            <span>{{ scope.row.allActualHourSession }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="rateType" label="Rate Type">
                  <template slot-scope="scope">
                    <span >{{scope.row.rateType}}</span>
                  </template>
         </el-table-column>
         <!-- 总时长 -->
        <el-table-column prop="rate" label="Pay Rate">
                  <template slot-scope="scope">
                    <span >{{scope.row.rate }}</span>
                  </template>
         </el-table-column>
         <!-- session 总数量 -->
         <el-table-column prop="allMonthTotal" label="Total Amount">
           <template slot-scope="scope">
             <span :style='scope.row.venue==="Grand-total"?"font-weight: 650;":""'>{{ scope.row.allMonthTotal }}</span>
           </template>
         </el-table-column>
        <!-- 总时长 -->
        <el-table-column prop="allTotalHour" label="Total Hr">
          <template slot-scope="scope">
            <span :style='scope.row.venue==="Grand-total"?"font-weight: 650;":""'>{{ scope.row.allTotalHour }}</span>
          </template>
        </el-table-column>


        <!-- 各个月份的数据  -->
        <!-- 遍历 query.months -->
        <!-- <el-table-column prop="monthDataList"
           v-if='$route.query.months' v-for='(mItme , m) in $route.query.months'
        :label="new Date(mItme).toDateString().split(' ')[1] + ' ' + 'Sessions' ">
           <template slot-scope="scope">
              <span>{{ scope.row.monthDataList[m]?scope.row.monthDataList[m].totalSession:'-'}}</span>
            </template>
          </el-table-column>
         <el-table-column prop="monthDataList"
            v-if='$route.query.months' v-for='(mItme , m) in $route.query.months'
         :label="new Date(mItme).toDateString().split(' ')[1] + ' ' + 'Total' ">
            <template slot-scope="scope">
               <span>{{ scope.row.monthDataList[m]?scope.row.monthDataList[m].monthTotal:'-'}}</span>
             </template>
           </el-table-column> -->
        <template  v-for='(mItme , m) in typeof($route.query.months) ==="object"?$route.query.months:[$route.query.months]'>
          <el-table-column prop="monthDataList"
          :key='m' v-if='$route.query.months'
        :label="new Date(mItme).toDateString().split(' ')[1] + ' ' + 'Sessions'">
           <template slot-scope="scope">
              <span :style='scope.row.venue==="Grand-total"?"font-weight: 650;":""' :key='L' v-for='(mL , L) in scope.row.monthDataList' v-if='mL.muneMonth ===mItme' >{{ mL?mL.totalSession:'-'}}</span>
            </template>
          </el-table-column>
        <el-table-column prop="monthDataList"
        v-if='$route.query.months'
          :label="new Date(mItme).toDateString().split(' ')[1] + ' ' +'Total$' ">
             <template slot-scope="scope">
               <span :key='L' v-for='(mL , L) in scope.row.monthDataList' v-if='mL.muneMonth ===mItme' >{{ mL?mL.monthTotal:'-'}}</span>

              </template>
            </el-table-column>
        </template>

      </el-table>
      <div class="btm-btn-groupss flex-box center">
        <el-button type="success" @click='$router.back(-1)'>Back</el-button>
        <el-button type="success" @click='exportFn'>Export</el-button>
        <el-button type="text">
          <el-pagination layout="sizes, prev, pager, next" :page-size="listQuery.size" :current-page="listQuery.page"
            :page-sizes="[25, 50, 100]" :total="listQuery.total" class="pagination-container" @current-change="handleCurrentChange"
            @size-change="handleSizeChange" />
        </el-button>

      </div>

    </div>
  </div>
</template>

<script>
  import {
    querySessionsList
  } from '@/api/account.js'
 import { SubtotalSameKeyList } from '@/utils'
  import {
    addEventScene,
    modifyEventScene,
    delEventScene,
    getEventScene
  } from '@/api/event'

  import {
    getBelongingTypes
  } from "@/api/setting.js"
  export default {
    components: {

    },
    data() {
      return {
        list: {
          list: [],
          monthTotal: {}
        },
        CLASS_TYPE: [],
        local: {},
        SPORTS_TYPE: [],
        EVENT_COUNTRY: [],
        buttonDisable: false,
        EVENT_TYPE: [],
        listLoading: true,
        link: '/event/addEdit',
        info: {
          months: '',
          sport: '',
          title: '',
          venue: '',
        },
        listQuery: {
          keyword: '',
          page: 1,
          size: 25,
          total:0
        },
        rules: {
          // eventName: [
          //     { required: true, message: 'Event cannot be empty', trigger: 'change' }
          // ],
        }
      }
    },
    created() {
      const query = this.$route.query
      this.fetchData()
    },
    methods: {
      fetchData(page,size) {
        let query = this.$route.query
       let months = this.$route.query.months
       months = months&&typeof(months) ==='object'?months.join(','):months
       let info = this.info
       info.months = months

        querySessionsList({
          page:page?page:this.listQuery.page,size:size?size:this.listQuery.size,
          ...info
        }).then(response => {
          //response = this.local
          if (response.status === 0) {
            if(!response.result.totalBySport){response.result.totalBySport=this.list.totalBySport}
            this.list = response.result
            this.listLoading = false
            this.listQuery.total = response.result.total ? response.result.total : this.listQuery.total
           if(this.listQuery.page === 1&&response.result.allSumTotal&&response.result.monthTotal&&response.result.list.length){
              response.result.monthTotal.map((list)=>{
               list.muneMonth =  list.month
              //  list.totalSession =  list.month
               //   list.muneMomonthTotalnth =  list.monthTotal
               // monthTotal
               list.actualHourSession = list.hourSession
               })
               let {totalSession:allTotalSession,hourSession:allHourSession,monthTotal:allMonthTotal} = response.result.allSumTotal

              let c = {allTotalSession,allTotalHour:allHourSession,allMonthTotal,monthDataList:response.result.monthTotal}
               this.list.list.unshift({venue:"Grand-total",...c,monthDataList:response.result.monthTotal})
            }
            // this.list.list =  SubtotalSameKeyList(this.list.totalBySport,this.list.list,'sportName','muneMonth','monthDataList')
           this.listQuery.total = response.result.total ? response.result.total : this.listQuery.total
            //this.listQuery.size =this.list.totalPage
            console.log("list",this,this.list.list)
          }
        })
      },
      exportFn(){
        let barName = 'account/'+this.$route.meta.exports
        this.$store.dispatch('app/onExport',{barName,params:{...this.info,token:this.list.exportToken}})
      },
      // pageSize变化事件
      handleSizeChange(val) {

        this.listQuery.size = val
        this.fetchData()
      },
      // pageNum变化事件
      handleCurrentChange(page) {
        this.listQuery.page = page
        this.fetchData()
        // this.trainScheduleList(page, this.activeName)
      },
      sportMedicineFormatLink(row, column) {
        return row.row.id = 1
      }
    }
  }
</script>
<style scoped="scoped" lang="scss">
  .addList {
    .event-from {
      text-align: left;
    }

    .event-from .el-input {
      margin-right: 5px;
    }

    .event-from .el-form-item {
      margin-right: 5px;
      display: inline-block;
    }

    .event-from .el-input input {
      border-radius: 0;
    }
  }

  .addList .at span {
    color: #586982;
    margin-right: 20px;
  }
</style>
